<template>
  <div>
    <el-button plain @click="dialogVisible = true" type="primary">
      添加优惠卷
    </el-button>
    <el-select v-model="value.type" placeholder="请选择状态">
      <el-option label="价钱" value="0" :key="0"></el-option>
      <el-option label="天数" value="1" :key="1"></el-option>
    </el-select>
    <el-button
      type="primary"
      @click="mohu(value.offset, value.pagesize, value.type)"
    >
      查询
    </el-button>
    <el-table :data="tableData.records" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="cardName" label="名称" width="180" />
      <el-table-column prop="countPrice" label="价格" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.countPrice === null" type="warning">
            当前优惠卷为：天数优惠卷
          </el-tag>
          <el-tag v-else-if="scope.row.countPrice != null" type="success">
            {{ scope.row.countPrice }}元
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="day" label="天数" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.day === null" type="success">
            当前优惠卷为：价格优惠卷
          </el-tag>
          <el-tag v-else-if="scope.row.day != null" type="warning">
            {{ scope.row.day }}天
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="durableTime"
        label="该张卡卷持续时间"
        width="180"
      />
      <el-table-column prop="type" label="类型" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.type === 0" type="success">价格</el-tag>
          <el-tag v-else-if="scope.row.type === 1" type="warning">天数</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="生效时间" width="180" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template v-slot:default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-dialog
        v-model="dialogVisible"
        title="Tips"
        :before-close="handleClose"
      >
        <span>
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="优惠卷名称">
              <el-input v-model="form.cardName" />
            </el-form-item>
            <el-form-item label="类型">
              <el-radio-group v-model="form.type">
                <el-radio :value="0" :label="0">价格</el-radio>
                <el-radio :value="1" :label="1">天数</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="价格/天数">
              <el-input v-model="form.day" />
            </el-form-item>
            <el-form-item label="该张卡卷持续时间">
              <el-input v-model="form.durableTime" />
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="addCoupon(form)">
              Confirm
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

    <div>
      <el-pagination
        :current-page="tableData.currents"
        :page-size="tableData.size"
        :page-sizes="[1, 2, 3, 4, 10, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { couponupdate, deletecoupon, getcoupon } from '@/api/coupon'
const tableData = ref([])
const dialogVisible = ref(false)
const form = ref({})
const value = ref({})

function mohu(offset, pagesize, type) {
  FindAll(offset, pagesize, type)
}

function handleDelete(id) {
  deletecoupon(id).then(res => {
    if (res.code === 200) {
      FindAll()
    }
  })
}

function addCoupon(form) {
  couponupdate(form).then(res => {
    console.log(form.value)
    if (res.code === 200) {
      dialogVisible.value = false
      FindAll()
    }
  })
}

function FindAll(offset, pagesize, type) {
  getcoupon(offset, pagesize, type).then(res => {
    tableData.value = res.result
  })
}

function handleSizeChange(val) {
  console.log(`${val} items per page`)
  FindAll(tableData.value.currents, val)
}
function handleCurrentChange(val) {
  FindAll(val, tableData.value.size)
  console.log(`current page: ${val}`)
}
FindAll()
</script>

<style scoped lang="scss"></style>
